<template>
	<div class="goods-iteam" @click="iteamClick">
		<img :src="showImage" @load="imageLoad"/>
		<div class="goods-info">
			<p>{{goodsIteam.title}}</p>
			<span class="price">{{goodsIteam.price}}</span>
			<span class="collect">{{goodsIteam.cfav}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: "GoodsListIteam",
		props: {
			goodsIteam: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		computed: {
			showImage() {
				return this.goodsIteam.image || this.goodsIteam.show.img;
				// return (this.goodsItem.show && this.goodsItem.show.img) || this.goodsItem.image;
			}
		},
		methods: {
			// 通过事件总线发送事件
			imageLoad() {
					this.$bus.$emit("itemImageLoad")
				/* if(this.$route.path.indexOf("/home")) {
					this.$bus.$emit("homeItemImageLoad")
				}else if(this.$route.path.indexOf("/detail")) {
					this.$bus.$emit("detailItemImageLoad")
				} */
			},
			iteamClick() {
				this.$router.push("/detail/" + this.goodsIteam.iid)
			}
		}
	}
</script>

<style scoped>
	.goods-iteam {
	    padding-bottom: 40px;
	    position: relative;
	    width: 48%;
	  }
	
	  .goods-iteam img {
	    width: 100%;
	    border-radius: 5px;
	  }
	
	  .goods-info {
	    font-size: 12px;
	    position: absolute;
	    bottom: 5px;
	    left: 0;
	    right: 0;
	    overflow: hidden;
	    text-align: center;
	  }
	
	  .goods-info p {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    margin-bottom: 3px;
	  }
	
	  .goods-info .price {
	    color: var(--color-high-text);
	    margin-right: 20px;
	  }
	
	  .goods-info .collect {
	    position: relative;
	  }
	
	  .goods-info .collect::before {
	    content: '';
	    position: absolute;
	    left: -15px;
	    top: -1px;
	    width: 14px;
	    height: 14px;
	    background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
	  }
</style>
